<script setup lang="ts">
  import { ref } from "vue";
  import Dialog from "@/components/sql/Dialog.vue";
  import { Filter } from "@/components/SideBar";
  import { clo } from "@/util";
  const fd: gt.components.SideBar.Filter[] = [
    {
      label: "隶属分组", value: "", type: "cascader", opt: {
        options: [], props: {
          expandTrigger: "hover",
          checkStrictly: false,
          emitPath: false,
          value: "id",
          label: "name"
        }, clearable: true, collapseTagsTooltip: true, placeholder: "筛选分组"
      }
    },
    { label: "商品名称", value: "", type: "input", opt: { placeholder: "搜索商品名称 ?代表1个字符" } },
    { label: "商品详情", value: "", type: "input", opt: { placeholder: "搜索商品详情 %代表任意字符" } },
    { value: "开始查找", type: "button", opt: { onClick() { page.value.current = 1; init(); }, type: "success", class: "mac-ico-search" } },
    { value: "新增商品", type: "button", opt: { onClick() { click(0); }, type: "primary", class: "mac-ico-add-round", disabled: !api.me.per("商品创建") } },
  ];
  withDefaults(defineProps<{ modelValue?: gt.sql.goods; }>(), {});
  const
    page = ref<gt.PageData<gt.sql.goods>>({ current: 1, size: 10, total: 0, data: [] as gt.sql.goods[] }),
    entity = ref<InstanceType<typeof Dialog>>(),
    main = ref<HTMLDivElement>(),
    filterData = ref<any>(fd),
    emit = defineEmits<{ (e: "update:modelValue", v: gt.sql.goods): void; }>(),
    tip = ref([
      { label: "添加商品", value: 0, cls: "mac-ico-add-round", per: api.me.per("商品创建") },
      { label: "编辑商品", value: 1, cls: "mac-ico-edit", per: api.me.per("商品修改") },
      { label: "查看商品", value: 2, cls: "mac-ico-search", per: true },
      { label: "删除商品", value: 3, cls: "mac-ico-delete", per: api.me.per("商品删除") },] as const);
  async function init() {
    const loading = ElLoading.service({ text: "正在加载,请稍后...", target: main.value });
    if (!filterData.value[0].opt.options?.length) {
      filterData.value[0].opt.options = await gd.goodsTypeTree;
    }
    const rules: RequiredKey<QueryPage<gt.sql.goods>, "#rule"> = {
      "#page": { current: page.value.current, size: page.value.size },
      "#order": [["createTime", "DESC"]],
      "#rule": []
    };
    if (fd[0].value) { rules["#rule"].push({ field: "type", logic: "=", value: fd[0].value }); }
    if (fd[1].value) { rules["#rule"].push({ field: "name", logic: "like", value: fd[1].value }); }
    if (fd[2].value) { rules["#rule"].push({ field: "des", logic: "like", value: fd[2].value }); }
    page.value = await gd.goods.read(rules);
    loading.close();
  }
  init();
  async function click(type: gt.curd, p?: gt.sql.goods) {
    if (type == 0 && p) {
      p = Object.assign(clo(p), { id: "" });
    }
    if (!p) {
      p = format.def.goods;
    }
    entity.value?.open("goods", type, p, "商品");
  }
  function confirm() {
    init();
  }
  function currentChange(p: any) {
    emit('update:modelValue', p);
  }
</script>
<template>
  <div class="fg1 y oh goods" ref="main">
    <Filter :data="filterData" isRow />
    <el-table stripe highlight-current-row :data="page.data" class="wf fg1" type="expand" row-key="id"
      @currentChange="currentChange">
      <el-table-column prop="id" label="id" width="100" show-overflow-tooltip />
      <el-table-column prop="_createTime" label="创建时间" width="120" show-overflow-tooltip />
      <el-table-column prop="_user.name" label="创建人" width="120" show-overflow-tooltip />
      <el-table-column prop="_goodsType.name" label="商品类型" width="100" show-overflow-tooltip />
      <el-table-column prop="name" label="名称" show-overflow-tooltip />
      <el-table-column prop="money" label="单价(分)" show-overflow-tooltip />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <div class="buttons x zb">
            <template v-for="a in tip">
              <el-tooltip v-if="a.per" :content="a.value ? a.label : '复制添加商品'">
                <div :class="a.cls" @click.stop="click(a.value, row)" />
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper, ->, sizes, total"
      :page-sizes="[10, 20, 30, 40, 50, 100]" v-model:page-size="page.size" :total="page.total"
      v-model:currentPage="page.current" @size-change="init" @current-change="init" />
    <Dialog @confirm="confirm" ref="entity" />
  </div>
</template>
<style lang="scss" scoped>
  .goods {
    position: relative;

    .buttons {
      >div {
        cursor: pointer;
        padding: 0 0.4em;
        font-weight: 600;
        &:hover {
          border: 1px solid #a5a5a5;
          box-sizing: border-box;
          border-radius: 0.5em;
          box-shadow: 0 0 10px #000;
        }
      }
      >.mac-ico-add-round {
        color: var(--color-success);
      }
      >.mac-ico-edit {
        color: var(--color-warning);
      }
      >.mac-ico-search {
        color: var(--color-primary);
      }
      >.mac-ico-delete {
        color: var(--color-error);
      }
    }
  }
</style>